<template>
  <div class="high-risk-alert">
    <div class="module-title">
      <div class="title-icon">⚠️</div>
      <div class="title-text">高危人员预警列表</div>
    </div>
    
    <!-- 统计概览 -->
    <div class="alert-summary">
      <div class="summary-card critical">
        <div class="card-value">{{ criticalCount }}</div>
        <div class="card-label">严重疲劳</div>
      </div>
      <div class="summary-card high">
        <div class="card-value">{{ highRiskCount }}</div>
        <div class="card-label">高度疲劳</div>
      </div>
      <div class="summary-card medium">
        <div class="card-value">{{ mediumRiskCount }}</div>
        <div class="card-label">中度疲劳</div>
      </div>
    </div>
    
    <!-- 高危人员列表 -->
    <div class="personnel-list">
      <div class="list-header">
        <span class="col-name">姓名</span>
        <span class="col-id">工号</span>
        <span class="col-position">工种</span>
        <span class="col-duration">工作时长</span>
        <span class="col-heart">心率</span>
        <span class="col-level">疲劳等级</span>
      </div>
      <div class="list-content">
        <div 
          v-for="(person, index) in highRiskPersonnel" 
          :key="index"
          class="personnel-item"
          :class="person.riskLevel"
        >
          <div class="risk-indicator" :class="person.riskLevel"></div>
          <span class="col-name">
            <i class="person-icon">👷</i>
            {{ person.name }}
          </span>
          <span class="col-id">{{ person.employeeId }}</span>
          <span class="col-position">{{ person.position }}</span>
          <span class="col-duration">
            <i class="time-icon">⏱️</i>
            {{ person.workDuration }}h
          </span>
          <span class="col-heart" :class="person.heartStatus">
            <i class="heart-icon">💓</i>
            {{ person.heartRate }}
          </span>
          <span class="col-level">
            <span class="level-badge" :class="person.riskLevel">
              {{ person.riskLevelText }}
            </span>
          </span>
        </div>
      </div>
    </div>
    
    <!-- 建议操作 -->
    <div class="action-suggestions">
      <div class="suggestion-item">
        <i class="icon">🛑</i>
        <span class="text">建议立即安排 <strong>{{ criticalCount }}</strong> 人休息</span>
      </div>
      <div class="suggestion-item">
        <i class="icon">⏰</i>
        <span class="text">建议 <strong>{{ highRiskCount }}</strong> 人减轻工作强度</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HighRiskAlert',
  data() {
    return {
      criticalCount: 3,
      highRiskCount: 5,
      mediumRiskCount: 8,
      highRiskPersonnel: [
        {
          name: '张建国',
          employeeId: 'W20231001',
          position: '焊工',
          workDuration: 9.5,
          heartRate: 108,
          heartStatus: 'abnormal',
          riskLevel: 'critical',
          riskLevelText: '严重'
        },
        {
          name: '李明华',
          employeeId: 'W20231002',
          position: '架工',
          workDuration: 8.2,
          heartRate: 102,
          heartStatus: 'abnormal',
          riskLevel: 'critical',
          riskLevelText: '严重'
        },
        {
          name: '王大力',
          employeeId: 'W20231003',
          position: '钢工',
          workDuration: 7.8,
          heartRate: 98,
          heartStatus: 'warning',
          riskLevel: 'high',
          riskLevelText: '高危'
        },
        {
          name: '陈志强',
          employeeId: 'W20231005',
          position: '电工',
          workDuration: 7.5,
          heartRate: 95,
          heartStatus: 'warning',
          riskLevel: 'high',
          riskLevelText: '高危'
        },
        {
          name: '赵小明',
          employeeId: 'W20231006',
          position: '焊工',
          workDuration: 7.2,
          heartRate: 96,
          heartStatus: 'warning',
          riskLevel: 'high',
          riskLevelText: '高危'
        },
        {
          name: '刘德华',
          employeeId: 'W20231007',
          position: '架工',
          workDuration: 6.8,
          heartRate: 92,
          heartStatus: 'warning',
          riskLevel: 'high',
          riskLevelText: '高危'
        },
        {
          name: '周星驰',
          employeeId: 'W20231008',
          position: '钢工',
          workDuration: 6.5,
          heartRate: 88,
          heartStatus: 'normal',
          riskLevel: 'medium',
          riskLevelText: '中危'
        },
        {
          name: '吴京',
          employeeId: 'W20231009',
          position: '电工',
          workDuration: 6.2,
          heartRate: 86,
          heartStatus: 'normal',
          riskLevel: 'medium',
          riskLevelText: '中危'
        }
      ],
      timer: null
    }
  },
  mounted() {
    this.startDataUpdate()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    startDataUpdate() {
      this.timer = setInterval(() => {
        this.updateData()
      }, 10000) // 每10秒更新一次
    },
    
    updateData() {
      // 模拟数据更新
      this.highRiskPersonnel.forEach(person => {
        if (Math.random() < 0.3) {
          // 更新工作时长
          person.workDuration = parseFloat((person.workDuration + Math.random() * 0.3).toFixed(1))
          
          // 更新心率
          const heartChange = (Math.random() - 0.5) * 6
          person.heartRate = Math.round(Math.max(70, Math.min(120, person.heartRate + heartChange)))
          
          // 更新心率状态
          if (person.heartRate > 100) {
            person.heartStatus = 'abnormal'
          } else if (person.heartRate > 90) {
            person.heartStatus = 'warning'
          } else {
            person.heartStatus = 'normal'
          }
          
          // 更新疲劳等级
          if (person.workDuration > 8.5 || person.heartRate > 105) {
            person.riskLevel = 'critical'
            person.riskLevelText = '严重'
          } else if (person.workDuration > 7 || person.heartRate > 95) {
            person.riskLevel = 'high'
            person.riskLevelText = '高危'
          } else if (person.workDuration > 6 || person.heartRate > 88) {
            person.riskLevel = 'medium'
            person.riskLevelText = '中危'
          } else {
            person.riskLevel = 'low'
            person.riskLevelText = '低危'
          }
        }
      })
      
      // 更新统计
      this.criticalCount = this.highRiskPersonnel.filter(p => p.riskLevel === 'critical').length
      this.highRiskCount = this.highRiskPersonnel.filter(p => p.riskLevel === 'high').length
      this.mediumRiskCount = this.highRiskPersonnel.filter(p => p.riskLevel === 'medium').length
    }
  }
}
</script>

<style lang="scss" scoped>
.high-risk-alert {
  height: 100%;
  padding: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    
    .title-icon {
      font-size: 18px;
      margin-right: 6px;
      animation: pulse-warning 2s infinite;
    }
    
    .title-text {
      font-size: 15px;
      font-weight: bold;
      color: #ff6b6b;
    }
  }
  
  // 统计概览
  .alert-summary {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
    
    .summary-card {
      flex: 1;
      text-align: center;
      padding: 6px 4px;
      border-radius: 4px;
      border: 1px solid;
      transition: all 0.3s ease;
      
      &.critical {
        background: rgba(255, 107, 107, 0.15);
        border-color: #ff6b6b;
        
        .card-value {
          color: #ff6b6b;
          animation: pulse-number 1.5s infinite;
        }
      }
      
      &.high {
        background: rgba(255, 167, 38, 0.15);
        border-color: #ffa726;
        
        .card-value { color: #ffa726; }
      }
      
      &.medium {
        background: rgba(255, 193, 7, 0.15);
        border-color: #ffc107;
        
        .card-value { color: #ffc107; }
      }
      
      .card-value {
        font-size: 18px;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 2px;
      }
      
      .card-label {
        font-size: 10px;
        color: #ccc;
      }
    }
  }
  
  // 人员列表
  .personnel-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 8px;
    
    .list-header {
      display: flex;
      align-items: center;
      padding: 5px 4px 5px 10px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
      font-size: 10px;
      color: #999;
      font-weight: 600;
      margin-bottom: 4px;
      flex-shrink: 0;
      border-left: 3px solid transparent;
      
      span {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .col-name { 
        flex: 0 0 65px; 
        justify-content: flex-start;
      }
      .col-id { flex: 0 0 48px; }
      .col-position { flex: 0 0 40px; }
      .col-duration { flex: 0 0 58px; }
      .col-heart { flex: 0 0 45px; }
      .col-level { flex: 1; min-width: 45px; }
    }
    
    .list-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      
      .personnel-item {
        display: flex;
        align-items: center;
        padding: 5px 4px 5px 10px;
        margin-bottom: 3px;
        border-radius: 3px;
        font-size: 11px;
        position: relative;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.03);
        
        &:hover {
          background: rgba(255, 255, 255, 0.08);
          transform: translateX(3px);
        }
        
        .risk-indicator {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 3px;
          border-radius: 2px 0 0 2px;
        }
        
        &.critical {
          border-left: 3px solid #ff6b6b;
          background: rgba(255, 107, 107, 0.08);
          animation: blink 2s infinite;
          
          .risk-indicator {
            background: #ff6b6b;
          }
        }
        
        &.high {
          border-left: 3px solid #ffa726;
          background: rgba(255, 167, 38, 0.05);
          
          .risk-indicator {
            background: #ffa726;
          }
        }
        
        &.medium {
          border-left: 3px solid #ffc107;
          background: rgba(255, 193, 7, 0.05);
          
          .risk-indicator {
            background: #ffc107;
          }
        }
        
        span {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .col-name {
          flex: 0 0 65px;
          justify-content: flex-start;
          gap: 3px;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          
          .person-icon {
            font-size: 12px;
            flex-shrink: 0;
          }
        }
        
        .col-id {
          flex: 0 0 48px;
          color: #4fc3f7;
          font-size: 10px;
          font-weight: 500;
          font-family: 'Courier New', monospace;
        }
        
        .col-position {
          flex: 0 0 40px;
          color: #aaa;
          font-size: 10px;
        }
        
        .col-duration {
          flex: 0 0 58px;
          gap: 2px;
          color: #ffa726;
          font-weight: 600;
          
          .time-icon {
            font-size: 10px;
          }
        }
        
        .col-heart {
          flex: 0 0 45px;
          gap: 2px;
          font-weight: 600;
          
          .heart-icon {
            font-size: 10px;
          }
          
          &.abnormal {
            color: #ff6b6b;
            animation: pulse-heart 1s infinite;
          }
          
          &.warning {
            color: #ffa726;
          }
          
          &.normal {
            color: #4fc3f7;
          }
        }
        
        .col-level {
          flex: 1;
          min-width: 45px;
          
          .level-badge {
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
            white-space: nowrap;
            
            &.critical {
              background: rgba(255, 107, 107, 0.3);
              color: #ff6b6b;
              border: 1px solid #ff6b6b;
            }
            
            &.high {
              background: rgba(255, 167, 38, 0.3);
              color: #ffa726;
              border: 1px solid #ffa726;
            }
            
            &.medium {
              background: rgba(255, 193, 7, 0.3);
              color: #ffc107;
              border: 1px solid #ffc107;
            }
          }
        }
      }
    }
  }
  
  // 建议操作
  .action-suggestions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: rgba(255, 167, 38, 0.1);
    border: 1px solid rgba(255, 167, 38, 0.3);
    border-radius: 4px;
    
    .suggestion-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: #ccc;
      
      .icon {
        font-size: 12px;
      }
      
      strong {
        color: #ffa726;
        font-weight: bold;
        padding: 0 3px;
      }
    }
  }
}

/* 滚动条样式 */
.list-content::-webkit-scrollbar {
  width: 3px;
}

.list-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.list-content::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 107, 0.4);
  border-radius: 2px;
}

.list-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 107, 0.6);
}

/* 动画效果 */
@keyframes pulse-warning {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes pulse-number {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

@keyframes pulse-heart {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes blink {
  0%, 100% {
    background: rgba(255, 107, 107, 0.08);
  }
  50% {
    background: rgba(255, 107, 107, 0.15);
  }
}
</style>


